<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基础高德离线地图</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/leaflet/leaflet.css}" rel="stylesheet"/>
    <link th:href="@{/leaflet-search/dist/leaflet-search.min.css}" rel="stylesheet"/>
    <link th:href="@{/leaflet-locatecontrol-gh-pages/src/L.Control.Locate.scss}" rel="stylesheet"/>
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
</head>
<body>

<!--定义一个DIV作为地图的容器，并设置wdith,height-->
<div id="map" style="width:1920px; height: 1080px;">

</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/leaflet/leaflet-src.js}"></script>
<script th:src="@{/leaflet-search/dist/leaflet-search.min.js}"></script>
<script th:src="@{/leaflet-locatecontrol-gh-pages/src/L.Control.Locate.js}"></script>



<script type="text/javascript" th:inline="none">
    <!-- 搜索功能准备的数据 -->
    var data = [
        {"loc":[36.813, 118.055], "title":"淄博市政府"},
        {"loc":[36.80255, 117.869825], "title":"周村区政府"},
        {"loc":[36.7997,117.8404], "title":"周村古商城"},
        {"loc":[36.83347, 117.921753], "title":"淄博职业学院"},
        {"loc":[36.812308, 117.852745], "title":"天香公园"},
    ];


    /*1.地图初始化*/
    var url = 'http://localhost:8088/map/{z}/{x}/{y}.png';
    var map = L.map('map').setView([36.8137, 118.0453], 13);
    L.tileLayer(url, {
        attribution: '高德普通地图',
        minZoom: 11,
        maxZoom: 13,  //缩放（下载的地图级别为15，所以最大缩放为15；没有下载14级别的地图，所以点一下缩小，找不到图片）
        crs: L.CRS.EPSG3857,   //要使用的坐标参考系统，默认的坐标参考系,互联网地图主流坐标系  可不设置
        zoomSnap: 0.5,
        zoomControl: true,
    }).addTo(map);


    /!*2.地图标记弹框功能*!/
    var marker = L.marker([36.7997,117.8404]).addTo(map);
    marker.bindPopup("<b>古商城!</b><br>").openPopup();


    var marker = L.marker([36.80255, 117.869825], {
    }).addTo(map) .bindTooltip("This is a test.", {
        permanent : true,
        offset : [ 0, 0 ],// 偏移
        direction : "right",// 放置位置
    }).openTooltip();


    var hld = L.icon({
        iconUrl: '/images/traffic_light.png', //图片url
        iconSize: [30, 40],     //设置图片大小 宽度50.高度100
        iconAnchor: [0, 0],   //设置定位点的位置。默认为中心  例子中以左上角为定位参考。相当于relative
        popupAnchor: [50, 0],   //设置警示框位置 ，以iconAnchor的值进行定位。相当于absolute 例子中的警示框定位到有、右上角
    });

    var m = L.marker([36.860, 117.962],{
        icon:hld,
        title:'青银高速',
        draggable:true
    }).addTo(map);




    /*3.地图搜索功能*/
    var markersLayer = new L.LayerGroup();	//layer contain searched elements
    map.addLayer(markersLayer);
    var controlSearch = new L.Control.Search({
        position:'topleft',
        layer: markersLayer,
        initial: false,
        zoom: 16,
        marker: false
    });
    map.addControl( controlSearch );

    for(i in data) {
        var title = data[i].title,	//value searched
            loc = data[i].loc,		//position found
            marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
        marker.bindPopup('title: '+ title );
        markersLayer.addLayer(marker);
    }

    /*4.点击显示经纬度*/
    //监听鼠标点击事件，弹出经纬度
    function onMapClick(e) {
        L.popup().setLatLng(e.latlng)
            .setContent('经纬度'+e.latlng.toString())
            .openOn(map)
    };
    map.on('click',onMapClick);


    //定位用户的位置
    map.locate({
        setView: true,
        maxZoom: 13
    });

    //当获取到用户的信息时触发改方法,在这里是自定义一个maker并绑定弹框事件
    map.on('locationfound', function (e) {
        var radius = e.accuracy / 2;
        L.marker(e.latlng).addTo(map).bindPopup("你就在这个圈内");
        console.log("哈哈哈哈哈哈")
        L.circle(e.latlng, radius).addTo(map);
    });


</script>
</body>
</html>